<!DOCTYPE html>
<html>
<head>
 
        <meta charset="utf-8" />
 
        <title>Demo Chat</title>
 
        <!-- <link href="bootstrap.css" rel="stylesheet"> -->
 
	<style>
		body {
			padding:20px;
		}
		#console {
			height: 400px;
			overflow: auto;
		}
		.username-msg {color:orange;}
		.connect-msg {color:green;}
		.disconnect-msg {color:red;}
		.send-msg {color:#888}
	</style>
 
 
	<script src="public/js/socket.io/socket.io.js"></script>
        <script src="public/js/moment.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 
	<script>
 
        var clientid = '2';
		var targetClientId= '1';
		
		var socket =  io.connect('http://118.24.19.142:8081?clientid='+clientid);
 
		socket.on('connect', function() {
			output('<span class="connect-msg">Client has connected to the server!</span>');
		});
 
		socket.on('messageevent', function(data) {
			output('<span class="username-msg">' + data.sendUserId + ':</span> ' + data.content);
		});
 
		socket.on('disconnect', function() {
			output('<span class="disconnect-msg">The client has disconnected!</span>');
		});
 
                function sendDisconnect() {
                        socket.disconnect();
                }
 
		function sendMessage() {
                        var message = $('#msg').val();
                        $('#msg').val('');
 
                        var jsonObject = {sendUserId: clientid,
                        				  receiveUserId: targetClientId,
                        				  type: 0,
                        				  releaseId: 0,
										  content: message};
                        socket.emit('messageevent', jsonObject);
		}
 
		function output(message) {
                        var currentTime = "<span class='time'>" +  moment().format('HH:mm:ss.SSS') + "</span>";
                        var element = $("<div>" + currentTime + " " + message + "</div>");
			$('#console').prepend(element);
		}
 
        $(document).keydown(function(e){
            if(e.keyCode == 13) {
                $('#send').click();
            }
        });
	</script>
</head>
 
<body>
 
	<h1>Netty-socketio Demo Chat</h1>
 
	<br/>
 
	<div id="console" class="well">
	</div>
 
        <form class="well form-inline" onsubmit="return false;">
           <input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/>
           <button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
           <button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button>
        </form>
 
 
 
</body>
 
</html>
